<template>
  <div class="app-container">
    <!--    使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。-->
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="5%" align="center" label="id">
        <template slot-scope="{row}">
          <span>{{ row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="20%" align="center" label="标题">
        <template slot-scope="{row}">
          <span v-if="row.status">
            <span>{{ row.title }}</span>
          </span>
          <span v-else>
            <span>{{ row.title }}
              <el-tooltip effect="dark" content="下架状态" placement="bottom">
                <svg-icon icon-class="nosee"></svg-icon>
              </el-tooltip>
            </span>
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" min-width="13%" label="标签">
        <template slot-scope="{row}">
          <span v-for="item in row.tags">
            <el-tag type="info">{{item}}</el-tag>
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" min-width="20%" label="封面">
        <template slot-scope="{row}">
          <img class="blogImage" :src="row.image">
        </template>
      </el-table-column>

      <el-table-column min-width="7%" align="center" label="阅读数">
        <template slot-scope="{row}">
          <span>{{row.examine}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="7%" align="center" label="评论数">
        <template slot-scope="{row}">
          <span>{{row.comment}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="7%" align="center" label="点赞数">
        <template slot-scope="{row}">
          <span>{{row.love}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="15%" align="center" label="创建时间">
        <template slot-scope="{row}">
          <span>{{ row.createTime | formatDate }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="13%" align="center" label="操作">
        <template slot-scope="{row}">
          <el-dropdown size="medium" split-button :type="row.status?'primary':'warning'" trigger="click">
            {{row.status?'操作':'下架'}}
            <div v-if="row.status">
              <el-dropdown-menu slot="dropdown">
                <el-button @click="updateBlog(row)" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button @click="changStatusView(row)" type="info" icon="iconfont el-icon-xiajia" circle></el-button>
                <el-button @click="deleteBlog(row)" type="danger" icon="el-icon-delete" circle></el-button>
              </el-dropdown-menu>
            </div>
            <div v-else>
              <el-dropdown-menu slot="dropdown">
                <el-button @click="updateBlog(row)" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button @click="changStatusView(row)" type="success" icon="iconfont el-icon-shangjia" circle></el-button>
                <el-button @click="deleteBlog(row)" type="danger" icon="el-icon-delete" circle></el-button>
              </el-dropdown-menu>
            </div>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>

    <div class="pageHelper">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allList.length"
        hide-on-single-page
        @current-change="changPage"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>

  import {getBlogList,changStatus,deleteBlog} from "@/api/blog";
  import {parseTime} from "@/utils";

  export default {
  name: 'blogManagement',
  filters: {
    formatDate(time) {
      return parseTime(time,'{y}-{m}-{d} {h}:{i}')
    }
  },
  data() {
    return {
      allList: [],
      list: null,
      listLoading: true,//加载中
      currentIndex: 1,
      limit: 10
    }
  },
  created() {
    this.getList()//初始化数据
  },
  methods: {
    async getList() {//有了async就能用await,然后就可以不用在请求的then里操作了
      const { data } = await getBlogList()//同步等待结果
      let newDate=null;
      let index=0;
      newDate = data.map(v => {
        v.index=index;
        v.tags=v.tag.split(',');
        index++;
        return v
      })
      console.log(newDate)
      this.allList=newDate;
      this.list=data.slice(0,this.limit)//>=0&&<=9 10个
      this.listLoading = false//加载完毕
    },
    changStatusView(row) {
      let status;
      if(row.status)//上架
        status=0;//改为下架
      else//下架
        status=1//改为上架
      changStatus(row.id,status).then(()=>{
        const h = this.$createElement;
        if(status===1) {
          this.$message({
            type: 'success',
            message: h('span', null, [
              h('span', { style: 'color: green' }, '上架'),
              h('span', { style: 'color: green' }, ' 可见状态'),
            ])
          });
          this.allList[row.index].status=true;
          const i=row.index%this.limit;
          this.list[i].status=true;
        }
        else {
          this.$message({
            type: 'info',
            message: h('span', null, [
              h('span', { style: 'color: #808080' }, '下架'),
              h('span', { style: 'color: #808080' }, ' 变为草稿'),
            ])
          });
          this.allList[row.index].status=false;
          const i=row.index%this.limit;
          this.list[i].status=false;
        }
      }).catch(()=>{
        //错误
      })
    },
    changPage(currentIndex){
      if(currentIndex>Math.ceil(this.allList.length/this.limit))//向上取整
        currentIndex=Math.ceil(this.allList.length/this.limit);
      this.currentIndex=currentIndex;
      const arr=this.getListArray;
      this.list=this.allList.slice(arr[0],arr[1]);
    },
    deleteBlog(row){

      this.$prompt('请输入安全码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType:'password'
      }).then(({ value }) => {
        deleteBlog(row.id,value).then(res=>{
          this.allList.splice(row.index,1);

          for(let i=row.index;i<this.allList.length;i++){
            this.allList[i].index-=1;
          }

          this.changPage(this.currentIndex)

          this.$message({
            type: 'info',
            message: '删除成功'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    updateBlog(row){
      this.$router.replace({name:'updateBlog2',params:{
          blogId: row.id
        }})
    }
  },
  computed:{
    getListArray(){
      const currentIndex=this.currentIndex;
      const start=(currentIndex-1)*this.limit;//起始下标
      const end=start+this.limit;
      return [start,end];
    }
  },
  watch:{
    $route:function(to,from){
      if(this.$route.params.op==="1"){
        this.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .user-manager{
    width: 100%;
  }
  .pageHelper{
    text-align:center;
    margin-top: 30px;
  }
  .newBadge {
    margin-top: 10px;
    margin-right: 40px;
  }
  .newDiv{
    padding-left: 40px;
  }
  .blogImage{
    width: 140px;
    height: 100px;
  }
</style>
